<template>
  <div id="app">
    <logo-component></logo-component>
    <phone-component ref="phoneNumber"></phone-component>
    <password-component :placeholder="placeholder"></password-component>
    <div class="LOGIN">
      <el-button type="warning" round @click="Login">登录</el-button><br>
      <router-link to="/" id="login-tag" class="login-alter"> {{tag1}} </router-link>
      <span id="login-tag">   |    </span>
      <router-link to="/Alter" id="login-tag" class="login-regist"> {{tag2}} </router-link>
      <!-- <span id="login-tag">   |    </span>
      <span id="login-tag" class="login-regist"> 账户密码登录</span> -->
    </div>
    <other-component></other-component>
  </div>
</template>

<script>
import OtherComponent from './subComponent/Other.vue'
import LogoComponent from './subComponent/Logo.vue'
import PhoneComponent from './subComponent/Phone.vue'
import PasswordComponent from './subComponent/Password'
export default {
  name: 'login',
  data () {
    return {
      phoneNumber: '',
      passwordNumber: '',
      placeholder: '请输入您的密码',
      logo: require('@/assets/images/Login/logo.png'),
      tag1: '动态密码登录',
      tag2: '忘记账号?'
    }
  },
  methods: {
    Login () {
      console.log('登录成功！')
      console.log('|')
      this.$router.replace({ path: '/Main' })
    }
  },
  watch: {
    // 监听电话号码的数值是否为11位
    phoneNumber: function (newVal) {
      if (newVal.length === 11) {
        this.isPhoneWrong = false
      }
    }
  },
  components: {
    OtherComponent,
    LogoComponent,
    PhoneComponent,
    PasswordComponent
  }
}
</script>
<style lang="scss">
input:focus {
  width: 70%;
  border-bottom: 2px solid CornflowerBlue;
  border-top:0px;
  border-left:0px;
  border-right:0px;
  z-index: 999;
}
.LOGIN {
  text-align: center;
  margin-bottom: 100px;
  button {
    margin-top: 40px;
    width: 60%;
    margin-bottom: 20px;
    background: #E9BD7A;
  }
  #login-tag {
    font-family: 微软雅黑;
    font-size: 10px;
    font-weight: bold;
    color: cornflowerblue;
    margin: 5px
  }
}

</style>
